<script setup>
import {defineEmits, defineProps, onMounted, reactive, ref} from "vue";

const props = defineProps({userText: {type: Array, default: () => []}})
const typeText = reactive([
  {name: '手机号', text: 'mobile', value: '', required: false, rules: '/^1[2-9]\\d{9}$/'},
  {
    name: '邮箱',
    text: 'email',
    value: '',
    required: false,
    rules: '/^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$/'
  },
  {name: '姓名', text: 'name', value: '', required: false, rules: '/^[\\u4e00-\\u9fa5]{2,4}$/'},
  {name: '身份证号', text: 'id_card', value: '', required: false, rules: '/^\\d{17}[\\d|x]$/i'},
  {name: '银行卡号', text: 'bank_card', value: '', required: false, rules: '/^\\d{16,19}$/'},
  {name: '车牌号', text: 'car_number', value: '', required: false, rules: '/^[\\u4e00-\\u9fa5]{2}\\d{5}$/'},
  {name: '邮政编码', text: 'post_code', value: '', required: false, rules: '/^\\d{6}$/'},
  {name: '网址', text: 'url', value: '', required: false, rules: '/^(https?:|ftp:|file:)?\\/\\/.+/'},
  {name: 'QQ号', text: 'qq', value: '', required: false, rules: '/^[1-9][0-9]{4,}$/'},
  {name: '微信号', text: 'wechat', value: '', required: false, rules: '/^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/'},
  {name: '支付宝账号', text: 'alipay', value: '', required: false, rules: '/^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/'},
  {name: '自定义', text: 'custom', value: '', required: false, rules: ''}
])
const add = ref(false)
const addType = ref("")
const changeData = reactive([]);
const emit = defineEmits(["change"])
const bindChange = (val) => {
  addType.value = ""
  add.value = false
  changeData.push(typeText.find(item => item.text === val))
  emit("change", changeData)
}
onMounted(() => {
  if (props.userText.length) changeData.push(...props.userText)
})
</script>

<template>
  <el-button type="primary" @click="add=true" plain size="small" circle icon="plus" style="margin-bottom: 10px"/>
  <el-select v-model="addType" placeholder="请选择备注类型" v-if="add" @change="bindChange">
    <el-option v-for="(item,index) in typeText" :key="index" :label="item.name" :value="item.text"/>
  </el-select>
  <el-table :data="changeData" border v-if="changeData.length" size="small" style="margin: 10px auto">
    <el-table-column prop="name" label="标题">
      <template #default="{row}">
        <el-input v-model="row.name" placeholder="请输入标题" style="width: 100%" clearable
                  @input="emit('change',changeData)"/>
      </template>
    </el-table-column>
    <el-table-column prop="required" label="是否必填">
      <template #default="{row}">
        <el-switch v-model="row.required" inline-prompt active-text="必填" inactive-text="选填"
                   @change="emit('change',changeData)"/>
      </template>
    </el-table-column>
    <el-table-column>
      <template #default="{row}">
        <el-button type="danger" link icon="delete"
                   @click="changeData.splice(changeData.indexOf(row), 1),emit('change',changeData)"/>
      </template>
    </el-table-column>
  </el-table>
  <!--  <el-button link @click="emit('change',changeData)" type="primary" plain size="small">确认表单</el-button>-->
</template>

<style scoped lang="scss">

</style>
